<template>
  <div>
    <van-nav-bar
      fixed
      title="转账"
      left-arrow
      right-text="转账记录"
      @click-left="$utils.back($route.path);"
      @click-right="onClickRight"
    />
    <div class="has-top">
      <div class="page-content-box mlr-25">
        <van-form class="mt-25 br-10" style="overflow:hidden" @submit="onSubmit">
          <van-field
            v-model="inCountVal"
            name="转入账户"
            label="转入账户"
            placeholder="请输入会员账号"
            :rules="[{ required: true,message:' '}]"
          >
            <template #left-icon>
              <div>
                <SvgIcon icon-class="inCount" class="color-primary" />
              </div>
            </template>
          </van-field>
          <van-field
            v-model="transferTypeVal"
            readonly
            clickable
            name="转账类型"
            label="转账类型"
            placeholder="请选择转账类型"
            right-icon="arrow"
            :rules="[{ required: true,message:' '}]"
            @click="pickarea=true"
          >
            <template #left-icon>
              <div>
                <SvgIcon icon-class="transferType" class="color-primary" />
              </div>
            </template>
          </van-field>
          <p class="tac fs-32 mt-50 mb-30">转账金额</p>
          <div class="br-10 pd-36 bg-white money-box">
            <!-- <input class="input dis-b tac fs-52 ptb-40" type="text" v-model="transferSum" /> -->
            <van-field
              v-model="transferSum"
              name="转账金额"
              placeholder="请输入转账金额"
              :rules="[{ required: true,message:' '}]"
            />
            <div class="flex-s-c pt-25">
              <p class="color-gray-light">
                <SvgIcon icon-class="inCount" class="color-primary" />
                <span class="pl-20">可转出金额：{{ totalMoney }}</span>
              </p>
              <span class="color-primary" @click="transferSum=totalMoney">全部转出</span>
            </div>
            <textarea class="textarea br-12 mt-40 ptb-20 plr-40" rows="2" placeholder="填写转账备注" />
          </div>
          <div class="pt-90 pb-10 flex-center mlr-25">
            <van-button class="hollow-btn flex-g-1 br-12" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </div>

      <van-popup v-model="pickarea" class="popup" position="bottom">
        <div class="pd-32 hb">
          <p class="fs-36">请选择转账类型</p>
        </div>
        <van-radio-group v-model="radio" class="radio-group">
          <van-cell
            v-for="(item,index) in radioList"
            :key="index"
            clickable
            class="flex-s-c"
            :title="item"
            @click="changeRadio(index)"
          >
            <template #right-icon>
              <van-radio :name="index">
                <template #icon="props">
                  <div :class="[{ 'radio-box-active': props.checked }, 'radio-box']" />
                </template>
              </van-radio>
            </template>
          </van-cell>
        </van-radio-group>
      </van-popup>
    </div>
  </div>
</template>

<script>
import SvgIcon from 'components/SvgIcon'
import utils from 'utils/utils.js'
export default {
  components: {
    SvgIcon
  },
  data() {
    return {
      inCountVal: '',
      transferTypeVal: '',
      transferSum: '',
      totalMoney: '25512.00',
      radio: 0,
      pickarea: false,
      radioList: ['返点', '积分', '充值', '信用', '报单']
    }
  },

  methods: {
    onClickRight() {
      this.$router.push('/transfer/record')
    },
    changeRadio(index) {
      console.log(index)
      this.radio = index
      this.transferTypeVal = this.radioList[index]
      this.pickarea = false
    },
    onSubmit(value) {
      console.log(value)
      this.$router.push('/transfer/record')
    }
  }
}
</script>
<style lang="scss" scoped>
.money-box {
  overflow: hidden;
  .van-cell {
    padding-left: 0;
    padding-right: 0;
    font-size: 26px;
    &:after {
      left: 0;
    }
    /deep/.van-field__control {
      text-align: center;
    }
  }
  .textarea {
    border: 0;
    background: #f5f5f5ff;
    width: 100%;
  }
}
</style>
